<template>
  <div>
    <div class="title">
      <h3>《租赁协议》</h3>
    </div>
    <div class="box">
      <!-- 合约基本信息 -->
      <el-card style="margin-bottom:20px;" class="box1">
        <div class="header" slot="header">合约基本信息</div>
        <div class="conent">
          <div>
            <!-- 房源信息 -->
            <el-row :gutter="10">
              <el-col :span="24" class="box_title">1、房源信息</el-col>
              <el-col v-for="(item,index) in houseList" :key="index" :span="24">
                <el-col :span="10">
                  <p class="box_lab">所属小区：</p>
                  <el-input disabled v-model="item.communityName" placeholder="所属小区"></el-input>
                </el-col>
                <el-col :span="10">
                  <p class="box_lab">房间信息：</p>
                  <el-input :disabled="!houseShow" v-model="item.roomName" placeholder="所属小区"></el-input>
                </el-col>
                <el-col :span="4">
                  <p style="margin-bottom:8px;visibility:hidden">-</p>
                  <el-button @click="show(index)" type="success" icon="el-icon-check" circle></el-button>
                  <!-- <el-button
                    @click="houseShow = -1"
                    v-else
                    type="primary"
                    icon="el-icon-edit"
                    circle
                  ></el-button>-->
                  <el-button
                    @click="delRoom(index)"
                    v-if="houseList.length>1"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </el-col>
              </el-col>
              <el-col :span="20" class="box_title">
                <el-button
                  @click="addRoom"
                  style="width:100%;"
                  size="mini"
                  type="primary"
                  class="el-icon-plus"
                  plain
                >添加房间</el-button>
              </el-col>
            </el-row>
            <!-- 租客信息 -->
            <el-row :gutter="10">
              <el-col :span="24" class="box_title">2、租客信息</el-col>
              <el-col v-for="(item,index) in userList" :key="index" :span="24">
                <el-col :span="10">
                  <p class="box_lab">
                    租客姓名：
                    <span class="box_lab1">多人入住，共用一张充值和扣费的卡</span>
                  </p>
                  <el-select style="width:100%;" v-model="item.userName" placeholder="请选择租客姓名">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="10">
                  <p class="box_lab">租客手机号：</p>
                  <el-input v-model="item.telephone" placeholder="手机号"></el-input>
                </el-col>
                <!-- btn -->
                <el-col :span="4">
                  <p style="margin-bottom:8px;visibility:hidden">-</p>
                  <el-button
                    @click="userShow = !userShow"
                    type="success"
                    icon="el-icon-check"
                    circle
                  ></el-button>
                  <!-- <el-button
                    @click="userShow = !userShow"
                    v-if="!userShow"
                    type="primary"
                    icon="el-icon-edit"
                    circle
                  ></el-button>-->
                  <el-button
                    @click="delUser(index)"
                    v-if="userList.length>1"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </el-col>
              </el-col>
              <!-- addBtn -->
              <el-col v-if="userList.length<5" :span="20" class="box_title">
                <el-button
                  @click="addUser"
                  style="width:100%;"
                  size="mini"
                  type="primary"
                  class="el-icon-plus"
                  plain
                >添加租客</el-button>
              </el-col>
            </el-row>
            <!-- 收款账户 -->
            <el-row :gutter="10">
              <el-col :span="24" class="box_title">3、收款账户:</el-col>
              <el-col :span="24">
                <el-col :span="10">
                  <el-select style="width:100%;" v-model="value" placeholder="请选择收款账户">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="10">
                  <el-select style="width:100%;" v-model="value" placeholder="请选择付款账户">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-col>
            </el-row>
            <!-- 生效时间 -->
            <el-row :gutter="10">
              <el-col :span="24" class="box_title">4、生效时间</el-col>
              <el-col :span="24">
                <el-col :span="10">
                  <p class="box_lab">
                    合约生效时间：
                    <span class="box_lab1">合约生效之后开始计算费用</span>
                  </p>
                  <el-date-picker v-model="value" type="date" placeholder="选择日期"></el-date-picker>
                </el-col>
              </el-col>
            </el-row>
            <!-- end -->
          </div>
        </div>
      </el-card>
      <!-- 费用管理设置 -->
      <el-card class="box1">
        <div class="header" slot="header">费用管理设置</div>
        <div class="conent">
          <div>
            <!-- 合约类型 -->
            <el-row :gutter="10">
              <el-col :span="24" class="box_title">
                1、合约类型
                <span class="box_lab1">后付费合约欠费将不会拉闸</span>
              </el-col>
              <el-col :span="24">
                <el-col :span="10">
                  <el-radio-group style="margin:10px;" v-model="radio">
                    <el-radio :label="3">预付费</el-radio>
                    <el-radio :label="6">后付费</el-radio>
                  </el-radio-group>
                </el-col>
              </el-col>
            </el-row>
            <!-- 透支额度 -->
            <el-row :gutter="10">
              <el-col :span="24" class="box_title">
                2、透支额度
                <span class="box_lab1">若设备不是您购买的，透支额度不可超过￥20</span>
              </el-col>
              <el-col :span="24">
                <el-col :span="10">
                  <p></p>
                  <el-input v-model="value" placeholder="额度"></el-input>
                </el-col>
              </el-col>
            </el-row>
            <!-- 充值通道费 -->
            <el-row :gutter="10">
              <el-col :span="24" class="box_title">3 、充值通道费(%)</el-col>
              <el-col :span="24">
                <el-col :span="10">
                  <p></p>
                  <el-input v-model="value" placeholder="充值通道费"></el-input>
                </el-col>
                <el-col :span="10">
                  <span class="box_lab">充值通道费由谁承担：</span>
                  <el-radio v-model="radio1" :label="1">备选项</el-radio>
                  <div>
                    <span class="box_lab1">举例：假设通道费为0.6%，如果租客充值￥100，租客的卡到账￥100，商户的收入要减去该通道费￥0.6</span>
                  </div>
                </el-col>
              </el-col>
            </el-row>
            <!-- 费用设置 -->
            <el-row :gutter="10">
              <el-col :span="24" class="box_title">4、费用设置</el-col>
              <el-col :span="24">
                <!-- <el-tabs v-model="activeName"> -->
                <!-- <el-tab-pane label="电费" name="first"> -->
                <avue-crud :data="data" :option="option1">
                  <template slot="menuLeft">
                    <el-button type="success" size="small" @click="dialogTableVisible = true">模板设置</el-button>
                  </template>
                </avue-crud>
                <!-- </el-tab-pane> -->
                <!-- </el-tabs> -->
              </el-col>
            </el-row>
            <div style="text-align: center;">
              <el-button @click="last" size="mini" style="margin-right:20px;" type="primary">返回</el-button>
              <el-button size="mini" type="primary">保存</el-button>
            </div>
            <!-- end -->
          </div>
        </div>
      </el-card>
    </div>
    <!-- 计费模板-dialog -->
    <el-dialog
      class="dialog"
      :append-to-body="true"
      title="计费模板"
      :visible.sync="dialogTableVisible"
      width="60%"
    >
      <avue-crud @selection-change="selectionChange" :data="data1" :option="option2">
        <template slot-scope="{type,size}" slot="menu">
          <el-button
            @click="templateVisable = true"
            icon="el-icon-check"
            :type="type"
            :size="size"
          >查看</el-button>
        </template>
      </avue-crud>
    </el-dialog>
    <add-template :type="type" v-model="templateVisable"></add-template>
  </div>
</template>

<script>
import addTemplate from "../meter/components/calculationtemplate/addTemplate";
export default {
  name: "contractDetails",
  components: {
    addTemplate,
  },
  data() {
    return {
      houseList: [
        {
          communityName: "yili",
          roomName: "201",
        },
      ],
      userList: [
        {
          userName: "lisi",
          telephone: "12312312312",
        },
      ],
      type: "view", // add: 新增 edit：编辑 view：查看
      templateVisable: false,
      userShow: -1,
      houseShow: true,
      value: "",
      options: [
        {
          label: "1",
          value: "2",
        },
      ],
      dialogTableVisible: false,
      radio: 3,
      radio1: 1,
      activeName: "first",
      option1: {
        menu: false,
        page: false,
        addBtn: false,
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "设备编号",
            prop: "name",
          },
          {
            label: "设备类型",
            prop: "sex",
          },
          {
            label: "设备属性",
            prop: "name",
          },
          {
            label: "当前状态",
            prop: "name",
          },
          {
            label: "最近读数",
            prop: "name",
          },
          {
            label: "设置计费始读数",
            prop: "name",
          },
          {
            label: "选择计费模板",
            prop: "name",
          },
          {
            label: "费用比例(%)",
            prop: "name",
          },
        ],
      },
      data: [
        {
          name: "1",
        },
      ],
      option2: {
        page: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        selection: true,
        selectable: (row, index) => {
          if (this.list.length >= 1) {
            if (row.name == this.list[0]["name"]) {
              return index === row.$index;
            }
          } else {
            return true;
          }
        },
        align: "center",
        menuAlign: "center",
        column: [
          {
            label: "模板名称",
            prop: "name",
          },
          {
            label: "计费模式",
            prop: "name",
          },
          {
            label: "结算周期",
            prop: "sex",
          },
        ],
      },
      data1: [
        {
          name: "1",
        },
        {
          name: "2",
        },
        {
          name: "3",
        },
        {
          name: "4",
        },
        {
          name: "54",
        },
        {
          name: "32",
        },
        {
          name: "13",
        },
      ],
      list: [],
    };
  },
  mounted() {},
  watch: {},
  methods: {
    last() {
      this.$router.go(-1);
    },
    show(index) {
      // this.houseShow = index;
    },
    delRoom(index) {
      this.houseList.splice(index, 1);
    },
    addRoom() {
      this.houseList.push({
        communityName: "yili",
        roomName: "201",
      });
    },
    delUser(index) {
      this.userList.splice(index, 1);
    },
    addUser() {
      this.userList.push({
        userName: "zhangsan",
        telephone: "12312312312",
      });
    },
    selectionChange(list) {
      console.log(list);
      this.list = list;
    },
  },
};
</script>

<style scoped lang='scss'>
.avue-view {
  padding: 0 !important;
}

.title {
  height: 80px;
  text-align: center;
  line-height: 80px;
  background-color: #fff;
  h3 {
    margin-top: 0;
  }
}

.box {
  padding: 16px;
  margin-bottom: 40px;

  .header {
    font-weight: 700;
    font-size: 16px;
    margin: 16px;
  }
}

.box1 {
  border-radius: 4px;
  border: 1px solid #e6ebf5 !important;
  /deep/.el-tabs__header {
    margin-left: 5px;
  }
}

.box_lab {
  font-size: 14px;
  color: #606266;
}

.box_lab1 {
  font-size: 12px;
  color: #909399;
}

.box_title {
  font-size: 16px;
}

.dialog {
  /deep/.avue-crud__menu {
    display: none;
  }
}
</style>